<!--
 * @Author: HeAo
 * @Date: 2022-08-23 20:29:02
 * @LastEditTime: 2022-08-24 14:13:01
 * @LastEditors: HeAo
 * @Description: 
 * @FilePath: \JavaScripe\day-12\06-Element类型.html
 * 别乱动！
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="div1">我是一个div标签</div>
  <script>
    var div1 = document.getElementById('div1')
    // 获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。
    console.log(div1.clientHeight);

    // innerHTML 用于设置或获取元素节点的内容
    console.log(div1.innerHTML); //我是一个div标签
    // 设置值
    div1.innerHTML = '我是被替换的值'

    // 元素.Element属性=值
    // element.attribute = value
    // className：获取或设置指定元素的 class 属性的值。
    div1.className = 'div11'

    // getAttribute() 返回元素节点的指定属性值。
    console.log(div1.getAttribute('id'));

    // setAttribute() 把指定属性设置或更改为指定值。
    div1.setAttribute('class', 'div12')

    // 设置样式
    div1.style.color = 'red'
    div1.style.backgroundColor = 'green'
  </script>
</body>

</html>